<template>
  <div class="dashboard">
    <div class="dashboard-chart">
      <div class="dashboard-chart-title">其它商品订单量</div>
      <div class="dashboard-chart-content">
        <div ref="orderChart" class="chart"></div>
      </div>
    </div>
    <div class="dashboard-chart">
      <div class="dashboard-chart-title">其它商品销售额</div>
      <div class="dashboard-chart-content">
        <div ref="salesChart" class="chart"></div>
      </div>
    </div>
    <div class="dashboard-chart">
      <div class="dashboard-chart-title">客户来源</div>
      <div class="dashboard-chart-content">
        <div ref="customerChart" class="chart"></div>
      </div>
    </div>
    <div class="dashboard-chart">
      <div class="dashboard-chart-title">主打热门商品</div>
      <div class="dashboard-chart-content">
        <div ref="hotProductChart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 订单量
      const orderChart = echarts.init(this.$refs.orderChart);
      orderChart.setOption({
        title: {
          text: '可视化1'
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '订单量',
          type: 'bar',
          data: [320, 332, 301, 334, 390, 330, 320]
        }]
      });

      // 销售额
      const salesChart = echarts.init(this.$refs.salesChart);
      salesChart.setOption({
        title: {
          text: '可视化2'
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '销售额',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210]
        }]
      });

      // 客户来源
      const customerChart = echarts.init(this.$refs.customerChart);
      customerChart.setOption({
        title: {
          text: '可视化3'
        },
        tooltip: {},
        legend: {
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '直接访问',
          type: 'bar',
          data: [320, 332, 301, 334, 390, 330, 320]
        }, {
          name: '邮件营销',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210]
        }, {
          name: '联盟广告',
          type: 'bar',
          data: [220, 182, 191, 234, 290, 330, 310]
        }, {
          name: '视频广告',
          type: 'bar',
          data: [150, 232, 201, 154, 190, 330, 410]
        }, {
          name: '搜索引擎',
          type: 'bar',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }]
      });

      // 热门商品
      const hotProductChart = echarts.init(this.$refs.hotProductChart);
      hotProductChart.setOption({
        title: {
          text: '可视化4'
        },
        tooltip: {},
        legend: {
          data: ['ov系列', '华为系列', '小米系列', '三星系列', '苹果系列']
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: 'ov系列',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210]
        }, {
          name: '华为系列',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310]
        }, {
          name: '小米系列',
          type: 'line',
          data: [150, 232, 201, 154, 190, 330, 410]
        }, {
          name: '三星系列',
          type: 'line',
          data: [320, 332, 301, 334, 390, 330, 320]
        }, {
          name: '苹果系列',
          type: 'line',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }]
      });
    }
  }
}
</script>

<style>
.dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.dashboard-chart {
  width: 48%;
  margin-bottom: 20px;
  height: 320px;
}

.dashboard-chart-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.dashboard-chart-content {
  height: 300px;
  border: 1px solid #ccc;
}

.chart {
  height: 100%;
}
.container {
  overflow: hidden;
}

</style>